<template>
  <div class="tabBar">
    <div v-if="datas.iconList.length !== 0" class="tabbar">
      <van-tabbar v-model="active" :fixed="false" :placeholder="true" :border="datas.isShowBorder"
        :active-color="datas.activeColor" :inactive-color="datas.inactiveColor">
        <van-tabbar-item v-for="(item, index) in datas.iconList" :key="index" :name="item.iconName" :dot="item.isDot">
          <span>{{ item.iconText }}</span>
          <template #icon="props">
            <img :src="props.active ? item.iconPic : item.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>

    <div v-else>
      <van-tabbar v-model="datas.Highlight" :fixed="false" :placeholder="true" :border="datas.isShowBorder"
        :active-color="datas.activeColor" :inactive-color="datas.inactiveColor">
        <van-tabbar-item icon="search" name="home">标签</van-tabbar-item>
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'tabBar',
  props: {
    datas: Object
  },
  data() {
    return {
      active: 0
    }
  },

  created() {
    document.querySelector('.phone-container').style.cssText =
      'padding-bottom: 50px'
  },

  mounted() { },

  methods: {},

  computed: {},

  watch: {},

  beforeDestroy() {
    document.querySelector('.phone-container').style.cssText =
      'padding-bottom: 0px'
  }
}
</script>

<style lang="less" scoped>
.tabBar {
  width: 100%;
  position: relative;
  position: absolute;
  bottom: -54px;
  left: 0px;
  z-index: 2;
}

.tabbar {
  /deep/ .van-icon {
    width: 25px;
    height: 25px;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
